<template>
	<view class="big_wrapper">
		<view class="bg">
		</view>
		<swiper autoplay="true" class="swiper" :style="swiperHeight">
			<swiper-item v-for="(item,index) in swiperList" :key="item.id"
			@click="toSwiperDetail(item.id)">
				<image :src="item.image" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="wrapper">
			<view class="top">
				<view class="image">
					<image src="../../static/image/emishenfenzheng@2x.png" mode=""></image>
				</view>
				<view :class="userInfo.code?'text':'opticy'">
					您的专属ID编号:{{userInfo.code}}
				</view>
				<view class="btn" @click="toforeCast">
					<button>开始集运</button>
				</view>
			</view>
			<view class="middle" :style="middleHeight">
				<view class="middle_wrapper" @click="toAbnormal">
					<view class="icon">
						<image src="../../static/image/yichang.png" mode=""></image>
					</view>
					<view class="content">
						<view class="text1">
							异常件认领
						</view>
						<view class="text2">
							异常快递单核实
						</view>
						<view class="statusNum" v-if="statusNum.err_package">
							{{statusNum.err_package}}
						</view>
					</view>
				</view>
				<view class="middle_wrapper border-right-none" @click="toWaitTohouse">
					<view class="icon">
						<image src="../../static/image/waitTohouse.png" mode=""></image>
					</view>
					<view class="content" >
						<view class="text1">
							未入库包裹
						</view>
						<view class="text2">
							包裹预报
						</view>
						<view class="statusNum" v-if="statusNum.wait_rk">
							{{statusNum.wait_rk}}
						</view>
					</view>
				</view>
				<view class="middle_wrapper" @click="toWaitDispose">
					<view class="icon">
						<image src="../../static/image/toWaitDispose.png" mode=""></image>
					</view>
					<view class="content">
						<view class="text1">
							待处理订单
						</view>
						<view class="text2">
							提交运输件信息
						</view>
						<view class="statusNum" v-if="statusNum.wait_cl">
							{{statusNum.wait_cl}}
						</view>
					</view>
				</view>
				<view class="middle_wrapper border-right-none" @click="toWaitPay">
					<view class="icon">
						<image src="../../static/image/waitTopay.png" mode=""></image>
					</view>
					<view class="content">
						<view class="text1">
							待支付订单
						</view>
						<view class="text2">
							支付包裹费用
						</view>
						<view class="statusNum" v-if="statusNum.wait_pay">
							{{statusNum.wait_pay}}
						</view>
					</view>
				</view>
				<view class="middle_wrapper" @click="todelivery">
					<view class="icon">
						<image src="../../static/image/waitTodelivery.png" mode=""></image>
					</view>
					<view class="content">
						<view class="text1">
							待发货订单
						</view>
						<view class="text2">
							集中安排发货
						</view>
						<view class="statusNum" v-if="statusNum.wait_fh">
							{{statusNum.wait_fh}}
						</view>
					</view>
				</view>
				<view class="middle_wrapper border-right-none"
				@click="tohadDelivery">
					<view class="icon">
						<image src="../../static/image/hadDelivery.png" mode=""></image>
					</view>
					<view class="content">
						<view class="text1">
							已发货订单
						</view>
						<view class="text2">
							您的包裹已发货
						</view>
						<view class="statusNum" v-if="statusNum.ok_fh">
							{{statusNum.ok_fh}}
						</view>
					</view>
				</view>
				<view class="middle_wrapper border-bottom-none"
				@click="toWaitToBring">
					<view class="icon">
						<image src="../../static/image/waitToBring.png" mode=""></image>
					</view>
					<view class="content">
						<view class="text1">
							待取件订单
						</view>
						<view class="text2">
							您的包裹待取件
						</view>
						<view class="statusNum" v-if="statusNum.wait_qh">
							{{statusNum.wait_qh}}
						</view>
					</view>
				</view>
				<view class="middle_wrapper border-right-none border-bottom-none"
				@click="toHadBring">
					<view class="icon">
						<image src="../../static/image/hadBring.png" mode=""></image>
					</view>
					<view class="content">
						<view class="text1">
							已签收订单
						</view>
						<view class="text2">
							查看已签收包裹
						</view>
						<view class="statusNum" v-if="statusNum.ok_qs">
							{{statusNum.ok_qs}}
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="tip" :style="bottomHeight" @click="toAddress">
					<view class="tip_icon">
						<image src="../../static/image/dizhi-4@2x.png" mode=""></image>
					</view>
					<view class="tip_text">
						仓库地址
					</view>
					<image class="tip_image" src="../../static/image/daohangdizhi.png" mode=""></image>
				</view>
				<view class="tip" :style="bottomHeight" @click="toHelp">
					<view class="tip_icon">
						<image src="../../static/image/bangzhu-4@2x.png" mode=""></image>
					</view>
					<view class="tip_text">
						帮助支持
					</view>
					<image class="tip_image1" src="../../static/image/bangzhu-5@2x.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[],
				middleHeight:"",
				swiperHeight:"",
				bottomHeight:"",
				userInfo:"",
				tmplIds:["iKktqARJrKtvcCGzHRo7m6FRBxdXD3YUPSiOMelIjxE",
				"NtMLzc9uGkTdsD9ogJ2aRWW4pOw80WU26fweQah1ouk",
				"leXljsbSB4pAcqDeOO43vNagzKiiu9y9NqAjOK0rdoU",],
				statusNum:{}
			}
		},
		async onShow() {
			this.userInfo=uni.getStorageSync("userInfo")
			this.statusNum=await this.getStatusNum()
			console.log(this.userInfo)
		},
		async created() {
			this.getHeight()
			this.swiperList=await this.getSwiperList()
			this.statusNum=await this.getStatusNum()
			console.log("测试"+this.statusNum)
			console.log(this.swiperList)
		},
		onUnload() {
			uni.clearStorageSync()
		},
		methods: {
			async getStatusNum(){
				let token=uni.getStorageSync("token");
				const {data}=await this.$http({
					url:"index/home_num",
					header:{
						token
					}
				})
				return data.data
			},
			async getSwiperList(){
				const {data}=await this.$http({
					url:"mis/banner"
				})
				return data.data
			},
			toDingyue(page){
				let that=this;
				uni.getSetting({
				      withSubscriptions: true,   //  这里设置为true,下面才会返回mainSwitch
				      success: function(res){   
				        // 调起授权界面弹窗
						
				        if (res.subscriptionsSetting.mainSwitch) {  // 用户打开了订阅消息总开关
				          if (res.subscriptionsSetting.itemSettings != null) {   // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
				            let moIdState = res.subscriptionsSetting.itemSettings[that.tmplIds];  // 用户同意的消息模板id
				            if(moIdState === 'accept'){   
				              console.log('接受了消息推送');
				
				            }else if(moIdState === 'reject'){
				              console.log("拒绝消息推送");
				
				            }else if(moIdState === 'ban'){
				              console.log("已被后台封禁");
				
				            }
							uni.navigateTo({
								url:`/pages/user/${page}/${page}`
							})
				          }else {
				          	// 当用户没有点击 ’总是保持以上选择，不再询问‘  按钮。那每次执到这都会拉起授权弹窗
				            uni.showModal({
				              title: '提示',
				              content:'请授权开通服务通知',
				              showCancel: true,
				              success: function (ress) {
				                if (ress.confirm) {  
				                  uni.requestSubscribeMessage({   // 调起消息订阅界面
				                    tmplIds: [...that.tmplIds],
				                    success (res) { 
				                      console.log('订阅消息 成功 ');
				                      console.log(res);
									  uni.navigateTo({
									  	url:`/pages/user/${page}/${page}`
									  })
				                    },
				                    fail (er){
				                      console.log("订阅消息 失败 ");
				                      console.log(er);
									  uni.navigateTo({
									  	url:`/pages/user/${page}/${page}`
									  })
				                    }
				                  })          
				                }else{
									uni.navigateTo({
										url:`/pages/user/${page}/${page}`
									})
								}
				              }
				            })
							
				          }
				
				        }else {
				          console.log('订阅消息未开启')
						  uni.navigateTo({
						  	url:`/pages/user/${page}/${page}`
						  })
				        }      
				      },
				      fail: function(error){
						console.log(error)
						uni.navigateTo({
							url:`/pages/user/${page}/${page}`
						})	
				      },
				    })
			},
			async getHeight(){
				uni.getSystemInfo({
					success:(res)=> {
						var clientHeight=res.windowHeight,
						 clientWidth=res.windowWidth,
						 rpxR=750/clientWidth;
						 var helfH=clientHeight*0.48*rpxR;
						 var swiper=clientHeight*0.3*rpxR;
						 var bottom=clientHeight*0.1*rpxR;
						 this.middleHeight="height:"+helfH+"rpx";
						 this.swiperHeight="height:"+swiper+"rpx";
						 this.bottomHeight="height:"+bottom+"rpx";
					}
				})
			},
			toforeCast(){
				let token=uni.getStorageSync("token");
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登陆",
						icon:"error"
					})
					return
				}
				uni.switchTab({
					url:"/pages/forecast/forecast"
				})
			},
			toAddress(){
				let token=uni.getStorageSync("token");
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登陆",
						icon:"error"
					})
					return
				}
				uni.navigateTo({
					url:"/pages/forecast/children/address/address"
				})
			},
			toHelp(){
				uni.navigateTo({
					url:"/pages/index/children/help/help"
				})
			},
			toSwiperDetail(id){
				uni.navigateTo({
					url:"/pages/index/children/swiperDetail/swiperDetail?id="+id
				})
			},
			toWaitTohouse(){
				let token=uni.getStorageSync("token");
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登陆",
						icon:"error"
					})
					return
				}
				this.toDingyue("waitTohouse")
			},
			toAbnormal(){
				let token=uni.getStorageSync("token");
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登陆",
						icon:"error"
					})
					return
				}
				this.toDingyue("Abnormal")
				
			},
			toWaitDispose(){
				let token=uni.getStorageSync("token");
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登陆",
						icon:"error"
					})
					return
				}
				this.toDingyue("waitTodispose")
			},
			toWaitPay(){
				let token=uni.getStorageSync("token");
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登陆",
						icon:"error"
					})
					return
				}
				this.toDingyue("waitTopay")
			},
			todelivery(){
				let token=uni.getStorageSync("token");
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登陆",
						icon:"error"
					})
					return
				}
				this.toDingyue("waitTodelivery")
			},
			tohadDelivery(){
				let token=uni.getStorageSync("token");
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登陆",
						icon:"error"
					})
					return
				}
				this.toDingyue("hadTodelivery")
			},
			toWaitToBring(){
				let token=uni.getStorageSync("token");
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登陆",
						icon:"error"
					})
					return
				}
				this.toDingyue("waitToBring")
			},
			toHadBring(){
				let token=uni.getStorageSync("token");
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登陆",
						icon:"error"
					})
					return
				}
				this.toDingyue("hadBring")
			}
		}
	}
</script>

<style>
.bg{
	position: fixed;
	background-color: #f1f1f1;
	width: 100%;
	height: 100%;
	left:0;
	top: 0;
}
.opticy{
	opacity: 0;
}
.big_wrapper{
	position: relative;
}
.swiper image{
	width: 100%;
	height: 100%;
}
.wrapper{
	padding: 0 30rpx;
	position:  relative;
	top: -49rpx;
}
.top{
	height: 98rpx;
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.top .text{
	margin-left: 20rpx;
	margin-right: 30rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
}
.image image{
	width: 61rpx;
	height: 41rpx;
	vertical-align: bottom;
}
.btn button{
	width: 180rpx;
	height: 62rpx;
	background: #F7CC46;
	border-radius: 30rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
}
.middle{
	height: 591rpx;
	width: 690rpx;
	margin:30rpx 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
}
.middle_wrapper{
	width: 50%;
	display: flex;
	height: 25%;
	align-items: center;
	justify-content: center;
	border: 1rpx solid rgba(151,151,151,0.2);
	border-left:none ;
	border-top:none ;
}
.border-right-none{
	border-right: none;
	padding-left: 30rpx;
}
.border-bottom-none{
	border-bottom: none;
}
.icon image{
	width: 50rpx;
	height: 50rpx;
}
.content{
	margin-left: 20rpx;
	width: 70%;
	position: relative;
}
.content .statusNum{
	width: 30rpx;
	height: 30rpx;
	background-color: red;
	border-radius: 50%;
	text-align: center;
	color: #FFFFFF;
	font-size: 20rpx;
	position: absolute;
	top: 5rpx;
	left: 135rpx;
}
.content .text1{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 600;
	color: #333333;
	padding: 5rpx 0;
}
.content .text2{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
	padding: 5rpx 0;
}
.bottom{
	display: flex;
	justify-content: space-between;
	height: 108rpx;
}
.tip{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
	height: 108rpx;
	width: 335rpx;
	border-radius: 10rpx;
}
.tip .tip_text{
	margin-left: 40rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 600;
	color: #333333;
}
.tip .tip_icon image{
	width: 51rpx;
	height: 51rpx;
}
.tip .tip_image{
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 85rpx;
}
.tip .tip_image1{
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 111rpx;
}
</style>
